<template>
  <!-- 楼层配置 -->
  <div class="floorConfig">
    <!-- 加载状态 -->
    <StaryeaLoading v-if="loading"></StaryeaLoading>
    <!-- 标题 -->
    <div class="title">楼层信息配置</div>
    <!-- 楼层信息 -->
    <div class="comInfo">

      <div class="item">
        <div class="label">瀑布流ID</div>
        <div class="infoCon" style="cursor: default;">
          <div>{{ floorData.flowId }}</div>
        </div>
      </div>
      <div class="item">
        <div class="label">楼层ID</div>
        <div class="infoCon" style="cursor: default;">
          <div>{{ floorData.floorId }}</div>
        </div>
      </div>
      <div class="item">
        <div class="label">预览源</div>
        <div class="infoCon">
          <el-radio-group v-model="floorData.dataType" :disabled="disabledType" @change="changeData">
            <el-radio :label="1">编辑</el-radio>
            <el-radio :label="2">预览</el-radio>
            <el-radio :label="3">现网</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="item">
        <div class="label"><span class="mark">*</span>楼层名称</div>
        <div class="infoCon">
          <el-input v-model="floorData.modularName" maxlength="32" placeholder="请输入楼层名称" clearable
            :disabled="disabledType">
          </el-input>
        </div>
      </div>
      <div class="item">
        <div class="label">楼层描述</div>
        <div class="infoCon">
          <el-input type="textarea" v-model="floorData.description" placeholder="请输入模板描述" :disabled="disabledType">
          </el-input>
        </div>
      </div>

      <!-- 标题栏 -->
      <div class="item" style="border:none;">
        <div class="label">楼层标题</div>
        <div class="infoCon">
          <el-radio-group v-model="floorData.titleBar.isTitle" @change="onChangeTitle" :disabled="disabledType">
            <el-radio :label="1">展示</el-radio>
            <el-radio :label="2">取消</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div v-if="floorData.titleBar.isTitle == 1 && (handleType == 'edit' || handleType == 'add')" class="item">
        <div class="label"></div>
        <div class="infoCon">
          <Upload v-if="floorData.titleBar.titImg == ''" :params="params" @fileList="getImgList1"
            :disabled="disabledType"></Upload>
          <Upload v-else :params="params1" @fileList="getImgList1" :disabled="disabledType"></Upload>
        </div>
      </div>
      <div class="item" style="border:none;">
        <div class="label">更多按钮</div>
        <div class="infoCon">
          <el-radio-group v-model="floorData.titleBar.isMore" @change="onChangeMore" :disabled="disabledType">
            <el-radio :label="1">展示</el-radio>
            <el-radio :label="2">取消</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div v-if="floorData.titleBar.isMore == 1" class="item">
        <div class="label">按钮名称</div>
        <div class="infoCon">
          <el-input v-model="floorData.titleBar.moreName" maxlength="32" placeholder="请输入按钮位置名称"
            :disabled="disabledType">
          </el-input>
        </div>
      </div>

      <!-- btn -->
      <div v-if="handleType == 'detail'" class="btn">
        <el-button round size="small" @click="lookHistory" type="primary" plain>历史记录</el-button>
      </div>
      <div v-if="handleType == 'history'" class="btn"></div>
      <div v-if="handleType != 'detail' && handleType != 'history'" class="btn">
        <el-button v-if="(handleType == 'add' || handleType == 'edit') && floorData.operationStatus == 3" round
          size="small" @click="unDelete" type="danger" plain>撤销删除</el-button>
        <el-button v-if="handleType != 'audit'" round size="small" @click="testRelease" type="info"
          plain>测试发布</el-button>
        <el-button v-if="handleType != 'audit'" round size="small" @click="submitAudit" type="success"
          plain>提交审核</el-button>
        <el-button v-if="!(handleType == 'audit' || floorData.operationStatus == 3)" round size="small" type="primary"
          @click="submit">
          <span style="margin-right:10px">保</span><span style="margin-left:10px">存</span>
        </el-button>
        <el-button v-if="handleType == 'audit'" round size="small" @click="audit" type="primary">
          <span style="margin-right:10px">审</span><span style="margin-left:10px">核</span>
        </el-button>
      </div>
    </div>

    <!-- 提交审核弹窗 -->
    <Modal v-model="submitAuditModal" title="提交审核" :width="1000">
      <div class="submitAudit">
        <div class="items">
          <div class="label"><span class="mark">*</span>上传机顶盒拍照：</div>
          <div class="infoCon">
            <Upload :params="uploadParams" @fileList="getImgList2" @removeImg="removeImg1"></Upload>
          </div>
        </div>
        <div class="items">
          <div class="label"><span class="mark">*</span>提交说明：</div>
          <div class="infoCon">
            <el-input type="textarea" :rows="3" v-model="submitAuditData.description"
              placeholder="请输入提交审核说明"></el-input>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button @click="submitAuditCancle">取消</Button>
        <Button type="primary" @click="submitAuditOk">确定</Button>
      </div>
    </Modal>

    <!-- 审核弹窗 -->
    <Modal v-model="auditModal" title="审核楼层" :width="1000">
      <!-- 版本列表 -->
      <div class="version">
        <el-timeline>
          <el-timeline-item v-for="(item, index) in versionList" :key="index" :timestamp="'审核人：' + item.auditName"
            placement="top">
            <el-card>
              <div class="items">
                <div class="label">审核说明：</div>
                <div class="infoCon">
                  <div>{{ item.auditDesc }}</div>
                </div>
              </div>
              <div class="items">
                <div class="label">机顶盒拍照：</div>
                <div class="infoCon" style="cursor: pointer;" @click="preImg(item.auditImgUrl)">
                  <img :src="item.auditImgUrl" alt="" style="width:80px;height:80px;">
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <!-- 审核 -->
      <div class="submitAudit">
        <div class="items">
          <div class="label"><span class="mark">*</span>上传机顶盒拍照：</div>
          <div class="infoCon">
            <Upload :params="uploadParams" @fileList="getImgList3" @removeImg="removeImg2"></Upload>
          </div>
        </div>
        <div class="items">
          <div class="label">审核说明：</div>
          <div class="infoCon">
            <el-input type="textarea" :rows="3" v-model="auditModalData.description" placeholder="请输入审核描述"></el-input>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button @click="handleCancle">取消</Button>
        <Button type="primary" @click="handleOk">同意</Button>
        <Button type="error" @click="handleReject">拒绝</Button>
      </div>
    </Modal>

    <!-- 审核记录图片查看 -->
    <el-dialog title="预览" width="300" :visible.sync="dialogTableVisible">
      <img :src="preURL" style="width:100%;height:100%;">
    </el-dialog>
  </div>
</template>

<script>
import Upload from '@/commont/plugins/uploadImg.vue' //图片上传
export default {
  name: "modelConfig",
  components: { Upload },
  props: {
    floorData: {
      type: Object,
      default: () => { },
      required: true,
    },
    disabledType: {
      type: Boolean,
      required: true,
    },
    handleModelType: {
      type: String,
      default: '',
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      handleType: sessionStorage.getItem("handleType"),
      // 更多按钮
      params: {//图片上传信息
        type: 'btn',
        btnName: '上传图片',
        url: '/iptv/epg/sichuan/categoryaudit/addPictures',
      },
      params1: {//图片上传信息
        type: 'btn',
        url: '/iptv/epg/sichuan/categoryaudit/addPictures',
        btnName: '修改图片',
      },
      titleBar: {//标题栏海报
        titImg: '',
        btnImg: '',
      },
      // 审核
      uploadParams: {//图片上传信息
        type: 'list',
        url: '/iptv/epg/sichuan/categoryaudit/addPictures',//上传接口路径
      },
      // 提交审核弹窗
      submitAuditModal: false,
      submitAuditData: {
        url: [],
        description: "",
      },
      // 审核弹窗
      auditModal: false,
      auditModalData: {
        url: [],
        description: "同意",
      },
      versionList: [],
      // 预览历史审核图片
      dialogTableVisible: false,
      preURL: '',
    }
  },
  methods: {
    // 上传标题海报
    getImgList1(data) {
      this.floorData.titleBar.titImg = data.fileByteUrl;
      let params = {
        floorId: this.floorData.floorId,
        titImg: data.fileByteUrl,
      }
      this.$emit('titleImg', params)
    },
    // 监听标题栏
    onChangeTitle(data) {
      let params = {
        floorId: this.floorData.floorId,
        isTitle: data,
        isMore: this.floorData.titleBar.isMore
      }
      this.$emit('titleBar', params)
    },
    // 监听更多按钮
    onChangeMore(data) {
      let params = {
        floorId: this.floorData.floorId,
        isMore: data,
        isTitle: this.floorData.titleBar.isTitle,
      }
      this.$emit('titleBar', params)
    },
    // 数据源查询
    changeData(val) {
      this.$emit('freshTable', this.floorData.floorId, 'floor', val);
    },
    // 保存
    submit() {
      if (this.floorData.modularName == '') {
        this.$message({ message: '请输入楼层名称！', type: 'warning' });
      } else if (this.floorData.titleBar.isTitle == 1 && this.floorData.titleBar.titImg == '') {
        this.$message({ message: '请上传要展示的标题海报！', type: 'warning' });
      } else {
        // 标题栏
        if (this.floorData.titleBar.isTitle == 2) {
          this.floorData.titleBar.titImg = '';
        } else if (this.floorData.titleBar.isMore == 2) {
          this.floorData.titleBar.btnImg = '';
        }

        let params = {
          flowId: this.floorData.flowId,
          floorPageId: this.floorData.floorId,
          modelId: this.floorData.modelId,
          modularName: this.floorData.modularName,
          modularJsonStr: JSON.stringify({
            comList: this.floorData.comList,
            modelH: this.floorData.modelH,
            titleBar: this.floorData.titleBar,
          }),
          modelVersion: this.floorData.modelVersion,
          dataType: this.floorData.dataType,
          description: this.floorData.description,
          sortModularId: this.floorData.sortModularId,
          isTitle: this.floorData.titleBar.isTitle,
          isMore: this.floorData.titleBar.isMore,
          titleImg: this.floorData.titleBar.titImg,
          moreName: this.floorData.titleBar.moreName,
          moreCategoryId: this.floorData.titleBar.btnCode,
          moreSequence: this.floorData.titleBar.btnIndex,
          autoSign: this.floorData.modelSign,
        }
        console.log("传后台参数", this.handleModelType, params);
        console.log("传后台参数", JSON.parse(params.modularJsonStr));
        if (this.handleModelType == '新增') {
          requestWaterfall(params, 'addFloor').then(res => {
            let { result_code, result_msg } = res;
            if (result_code == 0) {
              this.$message({ message: '保存成功', type: 'success' });
              //刷新楼层信息
              this.$emit('freshTable', this.floorData.floorId, 'floor', 1);
              // 更新瀑布流信息
              this.$emit('freshWaterfall');
            } else {
              this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
            }
          })
        } else if (this.handleModelType == '编辑') {
          params.id = this.floorData.id;
          requestWaterfall(params, 'updateFloor').then(res => {
            let { result_code, result_msg } = res;
            if (result_code == 0) {
              this.$message({ message: '修改成功', type: 'success' });
              //刷新楼层信息
              this.$emit('freshTable', this.floorData.floorId, 'floor', 1);
              // 更新瀑布流信息
              this.$emit('freshWaterfall')
            } else {
              this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
            }
          })
        }
      }
    },
    // 测试发布
    testRelease() {
      // if(this.hasBtn('test_submit_row')==false){
      //   this.$message({message:'您没有测试发布的权限，若要测试发布请联系管理员！',type:'error'});
      // } else {
      let params = {
        flowId: this.floorData.flowId,
        floorId: this.floorData.floorId,
      };
      this.$Modal.confirm({
        title: '发布提醒',
        content: '确定将 ' + this.floorData.modularName + ' 发布测试吗？',
        loading: true,
        onOk: function () {
          requestWaterfall(params, "releaseTestPushFloor").then(res => {
            let { result_code, result_msg } = res;
            if (result_code == 0) {
              this.$message({ message: '发布测试成功', type: 'success' });
              this.$Modal.remove();
            } else {
              this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
            }
          })
        }
      })
      // }
    },
    // 撤销删除
    unDelete() {
      let _this = this;
      this.$Modal.confirm({
        title: '撤销提醒',
        content: '确定撤销删除吗？',
        loading: true,
        onOk: function () {
          let params = {
            id: _this.floorData.id,
            flowId: _this.floorData.flowId,
            floorPageId: _this.floorData.floorId,
          }
          requestWaterfall(params, 'revokeDelete').then(res => {
            let { result_code, result_msg } = res;
            if (result_code == 0) {
              this.$message({ message: '撤销成功', type: 'success' });
              this.$Modal.remove();
              // 更新瀑布流信息
              _this.$emit('freshWaterfall')
            } else {
              this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
            }
          })
        }
      })
    },

    /************ 提交审核 **************/
    // 打开提交审核弹窗
    submitAudit() {
      // if(this.hasBtn('preview_submit_row')==false){
      //   this.$message({message:'您没有提交审核的权限，若要提交请联系管理员！',type:'error'});
      // } else {
      this.submitAuditModal = true;
      // }
    },
    // 上传提交审核图片
    getImgList2(data) {
      this.submitAuditData.url.push(data.url);
    },
    // 删除提交审核图片
    removeImg1(data) {
      let index = this.submitAuditData.url.indexOf(data.url);
      if (index != -1) { this.submitAuditData.url.splice(index, 1) }
    },
    // 确认提交
    submitAuditOk() {
      if (this.submitAuditData.url.toString() != '' || this.submitAuditData.description != '') {
        let params = {
          id: this.floorData.id,
          description: this.submitAuditData.description,
          submitImgUrl: this.submitAuditData.url.toString()
        }
        console.log('传给后端的参数', params);
        requestWaterfall(params, 'submitModular').then(res => {
          let { result_code, result_msg } = res;
          if (result_code == 0) {
            this.$message({ message: '提交审核成功', type: 'success' });
            this.submitAuditModal = false;
            this.submitAuditData.url = [];
            this.submitAuditData = {};
            // 更新瀑布流信息
            this.$emit('freshWaterfall')
          } else {
            this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
          }
        })
      } else {
        this.$message({ message: '请上传机顶盒照片！', type: 'warning' });
      }
    },
    // 关闭提交审核
    submitAuditCancle() {
      this.submitAuditModal = false;
      this.submitAuditData.url = [];
      this.submitAuditData = {};
    },

    /************ 审核 **************/
    // 打开审核弹窗
    audit() {
      this.auditModal = true;
      this.getAuditHistory();
    },
    // 历史审核信息
    getAuditHistory() {
      let params = { modularId: this.floorData.modularId, modularVersion: this.floorData.modularVersion };
      requestWaterfall(params, 'selectHistory').then(res => {
        let { result_code, result_msg, data } = res;
        if (result_code == 0) {
          let dataTest = [];
          if (data.length > 0) {
            data.forEach(item => {
              dataTest.push({
                auditName: item.auditName,
                auditDesc: item.auditDesc,
                auditImgUrl: item.auditImgUrl,
              })
            });
          }
          this.versionList = dataTest;
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    // 查看审核记录图片
    preImg(url) {
      this.preURL = url;
      this.dialogTableVisible = true;
    },
    // 上传审核图片
    getImgList3(data) {
      this.auditModalData.url.push(data.url);
    },
    // 删除审核图片
    removeImg2(data) {
      let index = this.auditModalData.url.indexOf(data.url);
      if (index != -1) { this.auditModalData.url.splice(index, 1) }
    },
    // 通过审核
    handleOk() {
      console.log(this.auditModalData);
      if (this.auditModalData.url.toString() != '') {
        let params = {
          id: this.floorData.id,
          auditStatus: 2,
          description: this.auditModalData.description,
          auditImgUrl: this.auditModalData.url.toString()
        }
        console.log('传给后端的参数', params);
        requestWaterfall(params, 'auditFloor').then(res => {
          let { result_code, result_msg } = res;
          if (result_code == 0) {
            this.$message({ message: '审核成功', type: 'success' });
            this.auditModal = false;
            this.auditModalData.url = [];
            this.auditModalData.description = '同意';
            // 更新瀑布流信息
            this.$emit('freshWaterfall');
          } else {
            this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
          }
        })
      } else {
        this.$message({ message: '请上传机顶盒照片！', type: 'warning' });
      }
    },
    // 拒绝通过
    handleReject() {
      let _this = this;
      if (_this.auditModalData.url.toString() != '') {
        this.$Modal.confirm({
          title: '删除提醒',
          content: '确定要拒绝该条审核？',
          loading: true,
          onOk: function () {
            let params = {
              id: _this.floorData.id,
              auditStatus: 3,
              description: _this.auditModalData.description,
              auditImgUrl: _this.auditModalData.url.toString()
            }
            console.log('传给后端的参数', params);
            requestWaterfall(params, 'auditFloor').then(res => {
              let { result_code, result_msg } = res;
              if (result_code == 0) {
                this.$message({ message: '拒绝成功', type: 'success' });
                this.$Modal.remove();
                _this.auditModal = false;
                _this.auditModalData.url = [];
                _this.auditModalData.description = '同意';
                // 更新瀑布流信息
                _this.$emit('freshWaterfall');
              } else {
                this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
              }
            })
          }
        })
      } else {
        this.$message({ message: '请上传机顶盒照片！', type: 'warning' });
      }
    },
    // 关闭审核弹窗
    handleCancle() {
      this.auditModal = false;
      this.auditModalData.url = [];
      this.auditModalData.description = '同意';
    },

    // 历史记录
    lookHistory() {
      if (this.hasBtn('show_history') == false) {
        this.$message({ message: '您没有查看历史记录的权限，若要查看请联系管理员！', type: 'error' });
      } else {
        this.$router.push({ path: '/historyRecord', query: { floorId: this.floorData.modularId } });
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.floorConfig {
  overflow: hidden;
  position: relative;
  margin-top: 20px;
  margin-left: 5px;
  margin-bottom: 20px;

  // 标题
  .title {
    margin-left: 15px;
    font-weight: bold;
  }

  // 模板信息
  .comInfo {
    margin-top: 10px;
    margin-left: 5px;

    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px dashed #dbdbdb;
      cursor: default;

      &:nth-last-child(1) {
        border: none;
      }

      .label {
        position: relative;
        width: 80px;
        color: #CFCFD2;

        .mark {
          position: absolute;
          left: -8px;
          top: 3px;
          color: red;
          font-weight: normal;
        }
      }

      .infoCon {
        width: calc(100% - 80px);
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        cursor: pointer;
      }
    }

    .btn {
      margin-top: 20px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
  }

  .update {
    .nameList {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 15px 20px;

      .name {
        font-weight: bold;
      }
    }

    .imgData {
      margin: 20px 15px;
      border: 2px dashed #8DBEFE;
      height: 150px;

      img {
        padding: 10px 40px;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
// input
::v-deep .el-input__inner {
  padding: 0px 10px;
  height: 35px;
  line-height: 35px;
}

// textarea
::v-deep .el-textarea__inner {
  resize: none;
  padding: 5px 10px;
}

// 按钮
::v-deep .el-button.is-round {
  padding: 8px 20px;
  border-radius: 15px;
}

::v-deep .el-button--primary {
  background-color: #3089fd;
  border-color: #3089fd;
}

::v-deep .el-button--primary:focus,
.el-button--primary:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #FFF;
}

::v-deep .el-button--primary.is-plain {
  color: #409EFF;
  background: #ecf5ff;
  border-color: #b3d8ff;
}

::v-deep .el-button--primary.is-plain:focus,
.el-button--primary.is-plain:hover {
  background: #409EFF;
  border-color: #409EFF;
  color: #FFF;
}

// table
::v-deep .ivu-table-cell {
  padding: 0;
}

::v-deep .ivu-table th {
  background-color: #F0F2F5 !important;
  font-weight: normal;
}

// Radio
::v-deep.el-radio {
  // margin-right: 10px;
}

// 时间线
::v-deep .el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
  display: block;
}

::v-deep .el-timeline-item {
  padding-bottom: 0px;
}

::v-deep .el-timeline-item__timestamp {
  font-weight: bold;
}

::v-deep .el-timeline-item__node {
  border: 1px solid #cdcdcd;
}

::v-deep .el-card__body {
  padding: 10px;
}

// 版本列表
::v-deep.ivu-modal-body .version {
  margin: 15px 20px;

  .items {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 10px 0;

    .label {
      width: 80px;
    }

    .infoCon {
      width: calc(100% - 80px);
    }
  }
}

// 提交审核
::v-deep .ivu-modal-body .submitAudit {
  margin: 15px 20px;

  .items {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 10px 0;

    .label {
      width: 120px;

      .mark {
        color: red;
        margin-right: 2px;
        font-weight: normal;
      }
    }

    .infoCon {
      width: calc(100% - 120px);
    }
  }
}
</style>
